import { Steps, Tabs } from 'nextra/components'

# Search Engine

Nextra includes a full-page search feature that makes it easy for users to find
relevant content across your entire documentation site.

> [!TIP]
>
> Check the
> [migration guide](https://the-guild.dev/blog/nextra-4#new-search-engine--pagefind)
> for more information.

## Setup

Nextra integrates with [Pagefind](https://pagefind.app), a static search library
that indexes your HTML files and provides lightning-fast, client-side full-text
search — all with no server required.

<Steps>
### Install `pagefind` as a dev dependency

```sh npm2yarn
npm i -D pagefind
```

### Add a `postbuild` script

Pagefind indexes `.html` files, so the indexing must happen **after building**
your application.

Add a `postbuild` script to your `package.json`:

<Tabs items={['Server builds', 'Static exports']}>
  <Tabs.Tab>
    ```json filename="package.json"
    "scripts": {
      "postbuild": "pagefind --site .next/server/app --output-path public/_pagefind"
    }
    ```
  </Tabs.Tab>
  <Tabs.Tab>
    ```json filename="package.json"
    "scripts": {
      "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind"
    }
    ```
  </Tabs.Tab>
</Tabs>

### Ignore generated files

Add `_pagefind/` to your `.gitignore` file to avoid committing generated index
files.

### Verify indexing output

After building and running the `postbuild` script, check that a `_pagefind/`
directory exists in `public/` or `out/`. Start your app and test the search bar
to confirm everything is working.

</Steps>

## Configuration

Search is enabled by default. You can disable it entirely by setting
`search: false{:js}` in your `next.config.mjs` file:

```js filename="next.config.mjs" {4}
import nextra from 'nextra'

const withNextra = nextra({
  search: false
})
export default withNextra()
```

To disable code block indexing while keeping search enabled set
`search: { codeblocks: false }{:js}`:

```js filename="next.config.mjs" {4}
import nextra from 'nextra'

const withNextra = nextra({
  search: { codeblocks: false }
})
export default withNextra()
```
